import { Button } from 'antd'
import React, { useEffect, useState } from 'react'

const UseEffectComponent: React.FC = () => {
  const [count, setCount] = useState(0)

  // 没有依赖时： DidMount + DidUpdate
  // 组件初始化和 props 更新都会执行；
  useEffect(() => {
    console.log('没有任何依赖')
  })

  // 依赖为空值相当于 DidMount；
  useEffect(() => {
    console.log('依赖为空值')
  }, [])

  // 存在依赖时，相当于 DidMount + 关联依赖 DidUpdate ；
  useEffect(() => {
    console.log('存在依赖')
  }, [count])

  // return 相当于模拟willUnMount但不等于；
  useEffect(() => {
    console.log('开始')
    return () => {
      console.log('结束')
    }
  }, [])

  return <Button onClick={() => setCount(count + 1)}>点击</Button>
}
export default UseEffectComponent
